<template>
    <view class="tabs">
		<!-- #ifndef MP-ALIPAY -->
		<picker @change="TabChange" :value="tabIndex" :range="tabBars" range-key="name">
			<view class="picker-inner">
				<view class="picker-title">
					请选择目标指数:
				</view>
				<view class="picker-value">
					{{tabName}}
				</view>
			</view>
		</picker>
		<!-- #endif -->
		<!-- 上方滚动条end -->
		
		<!-- 天数选择框 -->
		<!-- #ifndef MP-ALIPAY -->
		<picker @change="MdayChange" :value="mIndex" :range="mdays" range-key="value">
			<view class="picker-inner">
				<view class="picker-title">
					请选择当前天数:
				</view>
				<view class="picker-value">
					{{mday}}
				</view>
			</view>
		</picker>
		<!-- #endif -->
		
		<!-- #ifndef MP-ALIPAY -->
		<picker @change="FdayChange" :value="fIndex" :range="fdays" range-key="value">
			<view class="picker-inner">
				<view class="picker-title">
					请选择预测天数:
				</view>
				<view class="picker-value">
					{{fday}}
				</view>
			</view>
		</picker>
		<!-- #endif -->
		<!-- 天数选择框 -->
		
		
        <view class="line-h"></view>
		<view class="">
			<!-- 实时数据start -->
			<view class="qiun-columns">
				<view class="qiun-charts" >
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" 
					@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!--#endif-->
				</view>
			</view>
			<!-- 实时数据end -->
			
			<!-- 历史数据start -->
			<view class="qiun-columns">
				<view class="qiun-charts" >
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasLineB" id="canvasLineA" class="charts" 
					@touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
					<!--#endif-->
				</view>
			</view>
			<!-- 历史数据end -->
		</view>
		
    </view>
</template>
<script>
	
	import uCharts from '@/js_sdk/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	var _self;
	var canvaLineA=null;
	var canvaLineB=null;
	var lastAMoveTime=null;//最后执行移动的时间戳
	var lastBMoveTime=null;//最后执行移动的时间戳

	
	
	
    export default {
        components: {
			xyDialog,
        },
        data() {
            return {
				
				mdays: [
					{value:5},{value: 6}, {value:7}, {value:8},
					{value:9},{value: 10}, {value:11}, {value:12},
					{value:13},{value: 14}, {value:15}, {value:16},
					{value:17},{value: 18}, {value:19}, {value:20}
				],
				old_mIndex: 0,
				mIndex: 0,
				fdays: [
					{value:1},{value: 2}, {value:3}, {value:4},
					{value:5},{value: 6}, {value:7}, {value:8},
					{value:9},{value: 10}, {value:15}, {value:20},
					{value:30},{value: 60}, {value:90}, {value:120}
				],
				old_fIndex: 0,
				fIndex: 0,
				
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				
				old_mday: 5, // 缓存依据天数
				old_fday: 1, // 缓存预测天数
				mday: 5,  // 依据天数
				fday: 1,  // 预测天数

                tabIndex: 0,
                tabName: '上证指数',
                tabBars: [{
                    name: '上证指数',
                    id: 'shangzheng'
                }, {
                    name: '深证成指',
                    id: 'shenzhen'
                }, {
                    name: '沪深300',
                    id: 'hushen'
                }, {
                    name: '创业板指',
                    id: 'chuangye'
                }, {
                    name: '中证传媒',
                    id: 'chuanmei'
                }, {
                    name: '中证白酒',
                    id: 'baijiu'
                }, {
                    name: '中证军工',
                    id: 'jungong'
                }, {
                    name: '基建工程',
                    id: 'jijian'
                }, {
                    name: '保险主题',
                    id: 'baoxian'
                },
				{
				    name: '中证煤炭',
				    id: 'meitan'
				},
				{
				    name: '大农业',
				    id: 'nongye'
				},
				{
				    name: 'TMT50',
				    id: 'tmt'
				},
				{
				    name: '中证消费',
				    id: 'xiaofei'
				},
				{
				    name: 'CS新能车',
				    id: 'xinnengyuan'
				},
				{
				    name: '中证银行',
				    id: 'yinhang'
				},
				{
				    name: '全指医药',
				    id: 'yiyao'
				},
				{
				    name: '证券公司',
				    id: 'zhengquan'
				}],
                scrollInto: "",
                navigateFlag: false,
                pulling: false,
                refreshIcon: ""
            }
        },
        onLoad() {
        	_self = this;
        	this.cWidth=uni.upx2px(750);
        	this.cHeight=uni.upx2px(500);
        	this.getServerData(this.mday, this.fday);
        },
        methods: {
			// 下拉刷新触发
			onPullDownRefresh() {
				uni.stopPullDownRefresh()
				uni.showLoading({
					title:'加载中...',
					mask:false
				})
				uni.request({
					url: this.basicUrl+this.tabBars[this.tabIndex].id,
					data:{
					},
					success: function(res) {
						if(res.data.code === 20000){
							_self.getServerData(_self.mday, _self.fday);
						}else{
							console.log(res.data.data)
							uni.showModal({
								content: JSON.stringify(res),
								showCancel: false
							});
						}
					},
					fail: () => {
						uni.showModal({
							content: "网络错误！",
							showCancel: false
						});
					},
					complete() {
						// 停止当前页面下拉刷新
						uni.hideLoading()
					}
				});
			},
			
			ontabtap(e) {
			    let index = e.target.dataset.current || e.currentTarget.dataset.current;
			    this.tabIndex = index;
				console.log('ontabtap当前选择为'+index)
				this.getServerData(this.mday, this.fday);
			},
			
			
			
			
			
			getServerData(mday, fday){
				uni.showLoading({
					title:'加载中...',
					mask:false
				})
				uni.request({
					url: this.basicUrl+this.tabBars[this.tabIndex].id+'/'+mday+'/'+fday,
					data:{
					},
					success: function(res) {
						if(res.data.data === null){
							// 没有匹配到结果
							console.log(JSON.stringify(res))
							console.log(_self.old_mIndex)
							uni.showModal({
								content: JSON.stringify(res),
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										_self.mday = _self.old_mday;
										_self.fday = _self.old_fday;
										_self.mIndex = _self.old_mIndex
										_self.fIndex = _self.old_fIndex
										_self.getServerData(_self.mday,_self.fday)
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							
						}else {
							_self.old_mday = _self.mday
							_self.old_fday = _self.fday
							_self.old_mIndex = _self.mIndex
							_self.old_fIndex = _self.fIndex
							
							let LineA={categories:[],series:[]};
							let seriesA = {};
							let LineB={categories:[],series:[]};
							let seriesB = {};
							//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
							// LineA.categories=res.data.data.LineA.categories;
							// LineA.series=res.data.data.LineA.series;
							LineA.categories=res.data.data.mdate;
							seriesA.name = "实时数据";
							seriesA.color = "#ff0000";
							seriesA.data = res.data.data.mdata;
							LineA.series.push(seriesA);
							
							LineB.categories=res.data.data.fdate;
							seriesB.name = "历史数据";
							seriesB.color = "#052aff";
							//设为虚线
							seriesB.lineType = 'dash';
							seriesB.dashLength = 10;
							seriesB.data = res.data.data.fdata;
							LineB.series.push(seriesB);
							
							_self.showLine("canvasLineA",LineA,"canvasLineB",LineB);
						}
					},
					fail: () => {
						uni.showModal({
							content: "网络错误",
							showCancel: false
						});
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			showLine(canvasAId,chartAData,canvasBId,chartBData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasAId,
					type: 'line',
					colors:['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartAData.categories,
					series: chartAData.series,
					animation: false,
					xAxis: {
						// type:'grid',
						// gridColor:'#CCCCCC',
						// gridType:'dash',
						// dashLength:8,
						// disableGrid:true
						disabled:true
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
				
				canvaLineB=new uCharts({
					$this:_self,
					canvasId: canvasBId,
					type: 'line',
					colors:['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartBData.categories,
					series: chartBData.series,
					animation: false,
					xAxis: {
						// type:'grid',
						// gridColor:'#CCCCCC',
						// gridType:'dash',
						// dashLength:8,
						//disableGrid:true
						disabled:true
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				lastAMoveTime=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastAMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastAMoveTime = currMoveTime;
				
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			
			touchLineB(e) {
				lastBMoveTime=Date.now();
			},
			moveLineB(e) {
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastBMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastBMoveTime = currMoveTime;
				
				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
				}
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineB(e){
				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
				}
				canvaLineB.touchLegend(e);
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			
			MdayChange: function(e) {
				this.old_mday = this.mday
				this.mday = this.mdays[e.detail.value].value
				this.old_mIndex = this.mIndex
				this.mIndex = e.detail.value
				this.getServerData(this.mday, this.fday)
				
			},
			FdayChange: function(e) {
				this.old_fday = this.fday
				this.fday = this.fdays[e.detail.value].value
				this.old_fIndex = this.fIndex
				this.fIndex = e.detail.value
				this.getServerData(this.mday, this.fday)
			},
			TabChange: function(e) {
				// console.log(this.tabBars[e.detail.value].id)
				// 切换时初始化数据
				this.mday = 5
				this.fday = 1
				this.old_mday = 5
				this.old_fday = 1
				this.mIndex = 0
				this.fIndex = 0
				this.old_mIndex = 0
				this.old_fIndex = 0
				
				this.tabIndex = e.detail.value
				this.tabName = this.tabBars[e.detail.value].name
				this.getServerData(this.mday, this.fday)
			}
	
        }
    }
</script>

<style>
	@import url("index.css");
</style>

